<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="800"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >

            <el-row>
                <el-col :span="24" >
                    <div v-if="imgShow" style="text-align: center;">
                        <img :src="previewImageUrl" style="max-height: 500px;" />
                    </div>
                    <div v-else-if="ecxelShow" style="text-align: center;">
                         <iframe :src="officeUrl" width="100%" height="500px" frameborder="0"></iframe>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">关 闭</el-button>
        </template>
    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "查看附件",
                Edit: "查看附件",
                Show: "查看附件",
            },
       
            visible: false,
           
            imgShow:false,
            ecxelShow:false,
            pdfShow:false,
            previewImageUrl:"",
            docUrl:"",
        };
    },
    computed:{
            officeUrl(){
                return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.docUrl)}`
            }
        },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单注入数据
        async setData(data) {

            const filename = data.applyFile.split('/').pop(); // 获取文件名部分
			const parts = filename.split('.');
			const extension = parts[parts.length - 1].toLowerCase(); // 获取文件后缀并转换为小写
           
            switch (extension) {
					case 'xlsx':
					case 'xls':
                        this.docUrl =data.applyFile;
                        this.ecxelShow = true;
						break;
					case 'pdf':
						this.pdfShow = true
						break;
					case 'jpg':
					case 'jpeg':
					case 'png':
					case 'gif':
                        this.previewImageUrl = data.applyFile;
						this.imgShow = true;
						break;
					default:
						return 'Unknown file type';
						break;
				}
        },
        
    },
    async mounted() {

       
    },
};
</script>

<style></style>
